<template>
<div class="upload-file-wrapper">
    <Spin size="large" fix v-if="loading"></Spin> <!-- 加载动画 -->
    <p v-if="inputShow">待上传文件</p>
    <el-upload
        :class="uploadClass"
        ref="uploadCompt"
        drag
        :limit="1"
        :auto-upload="false"
        :multiple="false"
        action="-"
        accept=".txt,.xlsx,.xls,.csv"
        :on-remove="onUploadRemove"
        :on-change="onUploadChange"
        :before-upload="beforeUpload"
        >
        <div class="upload-file-content" v-if="">
            <Icon type="ios-cloud-upload" size="52" style="color: #224792"></Icon>
            <p class="m-t-15 el-upload__text">将文件拖到此处，或<em>点击上传</em></p>
        </div>
        <div v-if="!inputShow" slot="tip">仅支持Excel/CSV/TXT格式文件</div>
    </el-upload>
    <Form class="m-t-45" ref="nameForm" v-if="inputShow" :model="datasource" :label-width="100" label-position="left">
        <FormItem label="数据源名称" prop="datasourceName" :rules="{required: true, message: '请输入数据源名称'}">
            <Input v-model="datasource.datasourceName" placeholder="数据源名称" style="width: 360px"></Input>
        </FormItem>
    </Form>
</div>
</template>

<script>
import getData from 'getData'
export default {
    props: {
        datasource: {
            type: Object,
            required: true
        }
    },

    data () {
        return {
            uploadClass: '',//'disabled-upload',
            inputShow: false,
            loading: false,
        }
    },

    computed: {

    },

    methods: {
        next() {
            this.$refs.nameForm.validate(valid => {
                if (valid) {
                    this.$refs.uploadCompt.submit();
                }
            })
        },
        beforeUpload(file) {
            this.loading = true;
            var formData = new FormData();
            formData.append('file', file);
            formData.append('params', JSON.stringify({
                uid: file.uid,
                name: this.datasource.datasourceName,
                type: this.datasource.datasourceType
            }));
            getData.post('uploadDsFile', formData, {dataType: 'formData'}).then(res => {
                this.loading = false;
                if (res.status == 200 && res.data.code == '000') {
                    this.$Message.success('新增数据源成功！');
                    this.$emit('next');
                } else if (res.status == 200 && res.data.code != '000'){
                    this.$Message.warning('上传文件失败: '+ res.data.errorMsg);
                } else {
                    this.$Message.error('上传文件失败，请检查网络或联系管理员！');
                }
            })
            return false;
        },
        onUploadChange(file, fileList) {
            if (fileList.length > 0) {
                this.inputShow = true;
            }
            this.$nextTick(()=> {
                this.uploadClass = 'disabled-upload';
            });
        },
        onUploadRemove(file, fileList) {
            if (fileList.length == 0) {
                this.inputShow = false;
            }
            this.$nextTick(()=> {
                this.uploadClass = '';
            });
        }

    },
    mounted () {

    }
}
</script>

<style lang="less">
.upload-file-wrapper {
    position: relative;
    width: 456px;
    margin: 64px auto 0;
    .upload-file-content {
        padding-top: 64px;
        // height: 256px;
    }
    .el-upload-dragger {
        width: 456px;
        height: 256px;
        border-radius: 2px;
    }
    .el-upload-dragger:hover {
        border-color: #224792;
    }
    .el-upload-dragger:hover .upload-file-content {
        color: none;
    }
    .el-upload:focus .el-upload-dragger {
        border-color: #224792;
    }
    .el-upload-list__item {
        font-size: 16px;
        background: #f5f7f9;
    }
    .disabled-upload {
        .el-upload-dragger {
            display: none;
        }
        .el-upload-list {
            margin-top: -16px;
        }
    }
}
</style>
